<template>
  <div>
       <!-- 表格数据渲染 -->
    <el-table
    class="tab"
      border
      :data="books"
      style="width: 36%"
    >
      <el-table-column prop="name" label="商品" width="180">
      </el-table-column>
          <el-table-column prop="price" label="原价" width="180">
      </el-table-column>
      <el-table-column label="抱团价" width="160">
         <input type="text" style="width:100px"/>
      </el-table-column>
    </el-table>
    <el-button class="xuan" @click="show = true" plain>+选择商品</el-button>
    <!-- 弹出框 -->
    <el-dialog title="选择商品" :visible.sync="show" width="50%">  
        <!-- 切换框 -->
      <el-tabs value="first">
        <el-tab-pane label="课程" name="first">
            <Kecheng></Kecheng>
        </el-tab-pane>
        <el-tab-pane label="图书" name="second">
            <Tupian @books="getbooks"></Tupian>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import  Kecheng  from   "../../components/yingpin/kecheng";
import  Tupian from  "../../components/yingpin/tupian";
export default {
  components: {
      Kecheng,Tupian
  },
  data() {
    return {
      show: false,
      books:[]
    };
  },
  mounted() {},
  methods: {
    getbooks(data){
      this.books.push(data);
    }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.xuan {
  float: left;
  margin: 20px;
}
.tab{
  margin-top: 20px;
}
</style>
